<template>
    <div class="common-layout">
        <el-container>
            <!-- 头部部分 -->
            <el-header>
                <span style="font-size: 30px;">《智慧酒店项目》</span>
            </el-header>
            <!-- 左侧部分 -->
            <el-container>
                <el-aside  width="200px">
                    <el-menu
                        active-text-color="#ffd04b"
                        background-color="#545c64"
                        class="el-menu-vertical-demo"
                        text-color="#fff"
                        :default-active="route.path"
                        router
                    >
                        <!-- 系统保留 -->
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon><location /></el-icon>
                                <span>系统保留</span>
                            </template>
                            <el-menu-item-group >
                                <el-menu-item index="HomeView">HomeView</el-menu-item>
                                <el-menu-item index="about">AboutView</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>

                        <!-- 商品管理 -->
                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon><icon-menu /></el-icon>
                                <span>商品管理</span>
                            </template>
                            <el-menu-item-group >
                                <el-menu-item index="AddGoods">录入商品</el-menu-item>
                                <el-menu-item index="ShowGoods">商品列表</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>

                        <!-- 权限管理 -->
                        <el-sub-menu index="3">
                            <template #title>
                                <el-icon><document /></el-icon>
                                <span>权限管理</span>
                            </template>
                            <el-menu-item-group >
                                <el-menu-item index="AddUser">用户录入</el-menu-item>
                                <el-menu-item index="ShowUser">用户列表</el-menu-item>
                                <el-menu-item index="AddPermission">角色录入</el-menu-item>
                                <el-menu-item index="ShowPermission">角色列表</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>

                        <!-- 住宿管理 -->
                        <el-sub-menu index="4">
                            <template #title>
                                <el-icon><document /></el-icon>
                                <span>住宿管理</span>
                            </template>
                            <el-menu-item-group >
                                <el-menu-item index="ShowOrders">住宿订单列表</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                        
                        <!-- 报表管理 -->
                        <el-sub-menu index="5">
                            <template #title>
                                <el-icon><setting /></el-icon>
                                <span>报表管理</span>
                            </template>
                            <el-menu-item-group >
                                <el-menu-item index="OrderCount">订单统计</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                        
                    </el-menu>
                </el-aside>
                 <!-- 中间部分 -->
                <el-main>
                    <RouterView/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
    import {
        Document,
        Menu as IconMenu,
        Location,
        Setting,
    } from '@element-plus/icons-vue'
    import { RouterView ,useRoute} from 'vue-router';
    const route=useRoute();



</script>

<style>
    .el-header {
        height: 60px;
        line-height: 60px;
        background-color: rgb(37 82 209);
        color: #fff;
    }
    .el-aside {
        min-height: calc(100vh - 60px);
        background-color: #545c64;
    }
</style>
  